<template>
  <el-select size="mini" class="select"
              v-model="custSource"
              :placeholder="placeholder"
              :disabled="isNotAllowEdit"
              :no-match-text="$t('customer.noSource')"
              :no-data-text="$t('customer.noSource')"
              @change="handleChange">
    <el-option
      v-for="item in optionsSource"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
  import { isNotAllowEditSource } from '@/utils/customerUtils.js'
  import bus from '@/store/eventBus'
  export default {
    name: 'CustomerSourceSelect',
    data () {
      return {
        optionsSource: [],
        custSource: null
      }
    },
    props: {
      placeholder: {
        type: String,
        default: ''
      },
      source: {
        type: String,
        default: null
      },
      isFull: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      isNotAllowEdit () {
        return this.source !== null ? isNotAllowEditSource(this.$store.state.session.user) : false
      }
    },
    methods: {
      handleChange (value) {
        this.$emit('sourceChange', value)
      },
      fetchData () {
        Promise.all([
          this.$store.dispatch('getCache', { type: 'custTmpls' })
        ]).then(([custTmpls]) => {
          if (this._isDestroyed) {
            return
          }
          let custTmpl = custTmpls[0]
          let sources = [{ label: this.$t('customer.noSource'), value: '' }, ...custTmpl.source.map(source => ({ label: source.name, value: source.key }))]
          if (this.source) {
            let isSourceInOptions
            for (let i = 0; i < sources.length; i++) {
              if (sources[i].value === this.source) {
                isSourceInOptions = true
                break
              }
            }
            if (!isSourceInOptions) {
              sources.push({ label: this.$t('customer.deleteSource'), value: this.source })
            }
          }
          this.optionsSource = sources
          this.custSource = this.source || ''
        })
      }
    },
    mounted () {
      if (this.isFull) {
        bus.$on('changeCusSource', (msg) => {
          console.log('==========CustomerSourceSelect==========')
          this.fetchData()
        })
      }
    },
    beforeMount () {
      this.fetchData()
    }
  }
</script>
<style lang="stylus" scoped>
  .select
    width 100%
</style>
